<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="MyServlet.Candidate2"%>
<%@ page import="MyServlet.Position2"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<link type="text/css" href="css/menu.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" />
<link type="text/css" href="css/menu.css" rel="stylesheet" />
<link type="text/css" href="css/popup.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script>
	  $(function() {
	    $( "#tabs" ).tabs();
	  });
</script>

</head>
<body>
	<div id="tabs">
	  <ul>
	  	<li><a href="#tabs-2">Users</a></li>
	  </ul>
  <div id="tabs-2">
  <div id="myDiv2">
  		
  		<a style="float:left;" href="#loginmodal3" class="flatbtn" id="modaltrigger3"><button>+</button></a>

		<div id="loginmodal3" class="popupMany" style="display:none;">
		<h1>Add user</h1>
					<form id="loginform" name="loginform" method="POST" action="CrudUser">
						<label for="firstname">Firstname:</label> 
						<input type="text" name="firstname" id="firstname" class="txtfield" tabindex="1">

						<label for="lastname">Lastname:</label> 
						<input type="text" name="lastname" id="lastname" class="txtfield" tabindex="2">

						<label for="email">Email:</label> 
						<input type="text" name="email"	id="email" class="txtfield" tabindex="3"> 
						
						<label for="mobile">Mobile:</label> 
						<input type="text" name="mobile" id="mobile" class="txtfield" tabindex="4"> 
						
						<label for="phone"> Phone:</label>
						<input type="text" name="phone" id="phone" class="txtfield" tabindex="5">
						 
						<label for="password">Password:</label> 
						<input type="text" name="password" id="password" class="txtfield" tabindex="7">


						<label for="function">Function:</label> 
						<select name="function">
							<option value="Programmer">Programmer</option>
							<option value="TeamLeader">TeamLeader</option>
							<option value="ServerAdmin">ServerAdmin</option>
							<option value="AppAdmin">AppAdmin</option>
						</select> 
						
						<label for="roles">Role:</label> 
						<select name="roles">
							<option value="Director General">Director General</option>
							<option value="Director HR">Director HR</option>
							<option value="Administrator">Administrator</option>
							<option value="Recruiter">Recruiter</option>
							<option value="Director de Departament">Director de Departament</option>
						</select> 
						
						<br> <br>
						<div class="center">
							<input type="submit" name='option' value='add' id="loginbtn"
								class="flatbtn-blu hidemodal">
						</div>
					</form>
				</div>

				<br> <br>

				<c:if test="${!empty userActiveList }">
					<c:forEach items="${userActiveList}" var="user">
						<div>
							<form id="loginform" name="loginform" method="POST"
								action="CrudUser">
							<input style="visibility: hidden" class="inputtext" type="text"
														name="id" value="${user.id}" />
								<table style="border-bottom-style: solid;">
									<tr>
										<td><a href="CrudUser?id=${user.id}&option=delete"><span class="myButton">Delete</span></a></td>
										<td>
											<table>
												<tr>
													<td>First name: ${user.firstName}</td>
												</tr>
												<tr>
													<td>Last name: ${user.lastName}</td>
												</tr>
												<tr>
													<td>Email: ${user.email}</td>
												</tr>
												<tr>
													<td>Mobile: ${user.mobileNo}</td>
												</tr>
												<tr>
													<td>Phone: ${user.telephoneNo}</td>
												</tr>
												<tr>
													<td>Function: ${user.fun}</td>
												</tr>
												<tr>
													<td>Username: ${user.userName}</td>
												</tr>
												
													<tr>
													<td>Roles: <c:if test="${!empty user.roles}">
															<c:forEach items="${user.roles}" var="userRoles">
																<c:out value="${userRoles.title}" />
															</c:forEach>
														</c:if>
													</td>
												</tr>
											
											</table>
										</td>
										<td><img src="images/user.jpg" height="150" width="250"></td>
										<td>
											<table>
												<tr>
													<td>First name:</td>
													<td><input class="inputtext" type="text"
														name="firstname" /></td>
												</tr>
												<tr>
													<td>Last name:</td>
													<td><input class="inputtext" type="text"
														name="lastname" /></td>
												</tr>
												<tr>
													<td>Email:</td>
													<td><input class="inputtext" type="text" 
														name="email" /></td>
												</tr>
												<tr>
													<td>Mobile:</td>
													<td><input class="inputtext" type="text"
														name="mobileno" /></td>
												</tr>
												<tr>
													<td>Phone:</td>
													<td><input class="inputtext" type="text"
														name="telephoneno" /></td>
												</tr>
												<tr>
													<td>Password:</td>
													<td><input class="inputtext" type="text"
														name="password" /></td>
												</tr>
												<tr>
													<td>Function:</td>
													<td><select name="function">
															<option value="Programmer">Programmer</option>
															<option value="TeamLeader">TeamLeader</option>
															<option value="ServerAdmin">ServerAdmin</option>
															<option value="AppAdmin">AppAdmin</option>
													</select></td>
												</tr>
												<tr>
													<td>Roles:</td>
													<td><select name="roles">
													<option value="Director General">Director General</option>
													<option value="Director HR">Director HR</option>
													<option value="Administrator">Administrator</option>
													<option value="Recruiter">Recruiter</option>
													<option value="Director de Departament">Director de Departament</option>
												</select> </td>
												</tr>
											</table>
										</td>
										<td><input type="submit" tabindex="4" name="option"
											value="update" /></td>
									</tr>
								</table>
							</form>
						</div>
					</c:forEach>
				</c:if>
			</div>
		</div>
		
		</div>
</body>
</html>